<!-- 文件选择器 分级加载
属性：
path：查询的根目录
split 返回结果时，数组join为字符串的间隔符
ext "只显示的后缀的文件"
isCurDir 是否限定在当前目录 下级不展开
changeOnSelect 当此项为 true 时，点选每级菜单选项值都会发生变化 用于选择父级 默认为false
<FileSelect v-model="formData.sm_viewPath" path="/areas/home/views" split="/" ext="jpg,jpeg,gif"></FileSelect>
-->

<template>
    <Cascader v-model="selectVal" :data="data" :load-data="loadData" :change-on-select="changeOnSelect" :placeholder="placeholder" not-found-text="暂无选项" @on-change="onChange"></Cascader>
</template>

<script>
    import AppFrame from "../libs/app-frame";

    export default {
        name: "file-select",
        model: {
            prop: 'value',
            event: 'updateVal'
        },
        props:{
            value:{default:''},
            placeholder:{default:'选择文件'},
            path:{default: '/'},
            split:{default:','},
            ext:{default:''},
            changeOnSelect:{default:false},
            isCurDir:{default:0}//是否限定在当前目录 下级不展开
        },
        data:function(){
            return{
                selectVal:this.value?this.value.split(this.split) : [],
                data: []
            }
        },
        watch:{
            value:function(curVal,oldVal){
                this.selectVal=curVal.split(this.split);
            },
            selectVal:function (curVal,oldVal) {
                this.setValue(curVal.join(this.split));
            }
        },
        created(){

            this.getData(this.path);
        },
        methods:{
            getData(rootPath){
                let self=this;
                AppFrame.Http.Post("/manage-api/system/file/getItems",{rootPath:rootPath,isCurDir:this.isCurDir}).then(function (ret) {
                    if(ret && ret.Result===1){
                        self.data=ret.Data;
                    }
                }).catch(function(err) {
                    console.log(err);
                    self.$Message.error(JSON.stringify(err));
                });
            },
            loadData (item, callback) {

                item.loading = true;
                let self=this;
                let path=this.path+'/'+item.__label.replace(/ /g,'');
                let postData={rootPath:path,ext:self.ext};
                AppFrame.Http.Post("/manage-api/system/file/getItems",postData).then(function (ret) {
                    item.loading = false;

                    if(ret && ret.Result===1){
                        item.children=ret.Data;
                    }
                    callback();
                }).catch(function(err) {
                    this.$Message.error(JSON.stringify(err));
                    callback();
                });

            },
            onChange(val,selectData){
                this.$emit('onChange',{val,selectData});
            },

            setValue: function(val) {
                this.$emit("updateVal", val);
            },

        }
    }
</script>

<style scoped>

</style>
